<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/9/8
  Time: 9:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- 姓名非空、唯一验证
手机号非空、格式、唯一验证
唯一验证需要查询数据库-->

<input id="uname" type="text" name="uname" value=""> <span id="s1"></span><br>
<input id="phone" type="text" name="phone" value=""> <span id="s2"></span> <br>
</body>
</html>
<script>
    //姓名的验证
    $("#uname").blur(function() {
        //获取value值
        var value = $(this).val();
        //非空判断
        if(value == null || value.trim() == "") {
            $("#s1").text("姓名不能为空");
            $("#s1").css("color","red");
            return;
        }

        //唯一验证
        $.ajax({
            //url
            url:"homeworkServlet",
            data:{"mark":"validUname","uname":value},
            type:"get",
            dataType:"json",
            success:function(data) {
                //  b true 查得到   已存在    false  可以注册
                if(data) {
                    $("#s1").text("姓名已存在");
                    $("#s1").css("color","red");
                }else {
                    $("#s1").text("姓名可以使用");
                    $("#s1").css("color","green");
                }

            }
        })
    })
</script>

